<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Realm - Buttons</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Bluth Company">
    <link rel="shortcut icon" href="assets/ico/favicon.html">
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/theme.css" rel="stylesheet">
    <link href="assets/css/font-awesome.min.css" rel="stylesheet">
    <link href="assets/css/alertify.css" rel="stylesheet">
    <link rel="Favicon Icon" href="favicon.ico">
    <link href="http://fonts.useso.com/css?family=Open+Sans:400,700" rel="stylesheet" type="text/css">
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>
    <div id="wrap">
    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container-fluid">
          <div class="logo">
            <img src="assets/img/logo.png" alt="Realm Admin Template">
          </div>
           <a class="btn btn-navbar visible-phone" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
           <a class="btn btn-navbar slide_menu_left visible-tablet">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>

          <div class="top-menu visible-desktop">
            <ul class="pull-left">
              <li><a id="messages" data-notification="2" href="#"><i class="icon-envelope"></i> Messages</a></li>
              <li><a id="notifications" data-notification="3" href="#"><i class="icon-globe"></i> Notifications</a></li>
            </ul>
            <ul class="pull-right">  
              <li><a href="login.html"><i class="icon-off"></i> Logout</a></li>
            </ul>
          </div>

          <div class="top-menu visible-phone visible-tablet">
            <ul class="pull-right">  
              <li><a title="link to View all Messages page, no popover in phone view or tablet" href="#"><i class="icon-envelope"></i></a></li>
              <li><a title="link to View all Notifications page, no popover in phone view or tablet" href="#"><i class="icon-globe"></i></a></li>
              <li><a href="login.html"><i class="icon-off"></i></a></li>
            </ul>
          </div>

        </div>
      </div>
    </div>

    <div class="container-fluid">

      <!-- Side menu -->  
      <div class="sidebar-nav nav-collapse collapse">
        <div class="user_side clearfix">
          <img src="assets/img/odinn.jpg" alt="Odinn god of Thunder">
          <h5>Odinn</h5>
          <a href="#"><i class="icon-cog"></i> Settings</a>        
        </div>
        <div class="accordion" id="accordion2">
          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle b_F79999" href="index-2.html"><i class="icon-dashboard"></i> <span>Dashboard</span></a>
            </div>
          </div>
          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle b_C3F7A7" data-toggle="collapse" data-parent="#accordion2" href="#collapse1"><i class="icon-magic"></i> <span>Features</span></a>
            </div>
            <div id="collapse1" class="accordion-body in collapse" style="height:auto">
              <div class="accordion-inner">
                <a class="accordion-toggle" href="ui_features.html"><i class="icon-star"></i> UI Features</a>
                <a class="accordion-toggle" href="forms.html"><i class="icon-list-alt"></i> Forms</a>
                <a class="accordion-toggle" href="tables.html"><i class="icon-table"></i> Tables</a>
                <a class="accordion-toggle active" href="buttons.html"><i class="icon-circle"></i> Buttons</a>
              </div>
            </div>
          </div>
          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle b_9FDDF6 collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapse2"><i class="icon-reorder"></i> <span>Components</span></a>
            </div>
            <div id="collapse2" class="accordion-body collapse">
              <div class="accordion-inner">
                <a class="accordion-toggle" href="notifications.html"><i class="icon-rss"></i> Notifications</a>
                <a class="accordion-toggle" href="calendar.html"><i class="icon-calendar"></i> Calendar</a>
                <a class="accordion-toggle" href="gallery.html"><i class="icon-picture"></i> Gallery</a>
              </div>
            </div>
          </div>
          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle b_F6F1A2" href="tasks.html"><i class="icon-tasks"></i> <span>Tasks</span></a>
            </div>
          </div>
          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle b_C1F8A9" href="analytics.html"><i class="icon-bar-chart"></i> <span>Analytics</span></a>
            </div>
          </div> 
          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle b_9FDDF6" href="tickets.html"><i class="icon-bullhorn"></i> <span>Support Tickets</span></a>
            </div>
          </div> 
          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle b_F5C294" href="users.html"><i class="icon-user"></i> <span>Users</span></a>
            </div>
          </div>      
        </div>
      </div>
      <!-- /Side menu -->

      <!-- Main window -->
		  <div class="main_container" id="tables_page">
          <div class="row-fluid">
            <ul class="breadcrumb">
              <li><a href="#">Home</a> <span class="divider">/</span></li>
              <li><a href="#">Pages</a> <span class="divider">/</span></li>
              <li class="active">Buttons</li>
            </ul>
            <h2 class="heading">
               Buttons
              <div class="btn-group pull-right">
                <button class="btn"><i class="icon-download-alt"></i> Export</button>
                <button class="btn"><i class="icon-cog"></i> Settings</button>
              </div>
            </h2>
          </div> <!-- /row-fluid -->
          <div class="row-fluid">

            <div class="widget widget-padding span6">
              <div class="widget-header">
                <i class="icon-circle"></i>
                <h5>Custom Large Buttons</h5>
                <div class="widget-buttons">
                  <a href="#" data-title="Collapse" data-collapsed="false" class="tip collapse"><i class="icon-chevron-up"></i></a>
                </div>
              </div>
              <div class="widget-header-under"><i>btn btn-box span3</i></div>
              <div class="widget-body" style="height: 280px;">
              	<div class="row-fluid" style="margin-bottom:15px;">
                  <a class="btn btn-box bubble bubble-danger span3 tips" data-title="bubble-danger" href="#" data-bubble="5k"><i class="icon-user"></i><span>Users</span></a>
                  <a class="btn btn-box span3" href="#" data-bubble="2"><i class="icon-plus-sign"></i><span>Notifications</span></a>
                  <a class="btn btn-box span3" href="#" data-bubble="2"><i class="icon-calendar"></i><span>Calendar</span></a>
                  <a class="btn btn-box bubble bubble-info span3 tips" data-title="bubble-info" href="#" data-bubble="2"><i class="icon-signal"></i><span>Analytics</span></a>
              	</div>	
              	<div class="row-fluid" style="margin-bottom:15px;">
                  <a class="btn btn-box span3" href="#" data-bubble="2"><i class="icon-picture"></i><span>Gallery</span></a>
                  <a class="btn btn-box bubble bubble-warning span3 tips" data-title="bubble-warning" href="#" data-bubble="5"><i class="icon-tasks"></i><span>Tasks</span></a>
                  <a class="btn btn-box span3" href="#" data-bubble="2"><i class="icon-lightbulb"></i><span>Tickets</span></a>
                  <a class="btn btn-box bubble bubble-success span3 tips" data-title="bubble-success" href="#" data-bubble="102"><i class="icon-sitemap"></i><span>Categories</span></a>
              	</div>	
              </div><!--/widget-body-->
            </div><!-- /widget -->

            <div class="widget widget-padding span6">
              <div class="widget-header">
                <i class="icon-circle"></i>
                <h5>Custom Small Buttons</h5>
                <div class="widget-buttons">
                    <a href="#" data-title="Collapse" data-collapsed="false" class="tip collapse"><i class="icon-chevron-up"></i></a>
                </div>
              </div>
              <div class="widget-header-under"><i>btn btn-small btn-box span2</i></div>
              <div class="widget-body" style="height: 280px;">
              	<div class="row-fluid" style="margin-bottom:15px;">
                  <a class="btn btn-small btn-box bubble bubble-danger span2 tips" href="#" data-title="bubble-danger" data-bubble="5k"><i class="icon-user"></i><span>Users</span></a>
                  <a class="btn btn-small btn-box span2" href="#"><i class="icon-map-marker"></i><span>Map</span></a>
                  <a class="btn btn-small btn-box bubble bubble-info span2 tips" href="#" data-title="bubble-info" data-bubble="7k"><i class="icon-thumbs-up"></i><span>Likes</span></a>
                  <a class="btn btn-small btn-box bubble bubble-info span2 tips" href="#" data-title="bubble-info" data-bubble="10"><i class="icon-twitter"></i><span>Tweets</span></a>
                  <a class="btn btn-small btn-box span2 " href="#"><i class="icon-money"></i><span>Finance</span></a>
                  <a class="btn btn-small btn-box bubble bubble-warning span2 tips" href="#" data-title="bubble-warning" data-bubble="5"><i class="icon-globe"></i><span>Region</span></a>
              	</div>	
              	<div class="row-fluid" style="margin-bottom:15px;">
                  <a class="btn btn-small btn-box span2 tips" href="#" data-title=""><i class="icon-search"></i><span>Search</span></a>
                  <a class="btn btn-small btn-box span2 tips" href="#" data-title=""><i class="icon-cogs"></i><span>Settings</span></a>
                  <a class="btn btn-small btn-box bubble bubble-success span2  tips" href="#" data-title="bubble-success" data-bubble="8.4"><i class="icon-star-empty"></i><span>Rating</span></a>
                  <a class="btn btn-small btn-box span2 tips" href="#" data-title=""><i class="icon-list-alt"></i><span>Products</span></a>
                  <a class="btn btn-small btn-box span2 tips" href="#" data-title=""><i class="icon-circle-arrow-up"></i><span>Growth</span></a>
                  <a class="btn btn-small btn-box bubble bubble-success span2 tips" href="#" data-title="bubble-success" data-bubble="5"><i class="icon-envelope"></i><span>Inbox</span></a>
              	</div>	

              	<div class="alert alert-info">
              		<strong>Info</strong> To add bubbles to items just add data-bubble="15" and add the class "bubble bubble-info" to the element. Other colors: bubble-warning, bubble-error, bubble-success 
              	</div>

              </div><!--/widget-body-->
            </div><!-- /widget -->

          </div><!-- /row-fluid -->

          <div class="row-fluid">
            <div class="widget widget-padding span12">
              <div class="widget-header">
                <i class="icon-circle"></i>
                <h5>Buttons</h5>
                <div class="widget-buttons">
                  <a href="http://twitter.github.com/bootstrap/base-css.html#buttons" data-title="Documentation" class="tip" target="_blank"><i class="icon-external-link"></i></a>
                  <a href="#" data-title="Collapse" data-collapsed="false" class="tip collapse"><i class="icon-chevron-up"></i></a>
                </div>
              </div>  
              <div class="widget-body row-fluid">
                <div class="span6">
                  <h5>Button colors</h5>
                    <table class="table table-bordered table-striped">
                    <thead>
                      <tr>
                        <th>Button</th>
                        <th>class=""</th>
                        <th>Description</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td><button class="btn" type="button">Default</button></td>
                        <td><code>btn</code></td>
                        <td>Standard gray button with gradient</td>
                      </tr>
                      <tr>
                        <td><button class="btn btn-primary" type="button">Primary</button></td>
                        <td><code>btn btn-primary</code></td>
                        <td>Provides extra visual weight and identifies the primary action in a set of buttons</td>
                      </tr>
                      <tr>
                        <td><button class="btn btn-info" type="button">Info</button></td>
                        <td><code>btn btn-info</code></td>
                        <td>Used as an alternative to the default styles</td>
                      </tr>
                      <tr>
                        <td><button class="btn btn-success" type="button">Success</button></td>
                        <td><code>btn btn-success</code></td>
                        <td>Indicates a successful or positive action</td>
                      </tr>
                      <tr>
                        <td><button class="btn btn-warning" type="button">Warning</button></td>
                        <td><code>btn btn-warning</code></td>
                        <td>Indicates caution should be taken with this action</td>
                      </tr>
                      <tr>
                        <td><button class="btn btn-danger" type="button">Danger</button></td>
                        <td><code>btn btn-danger</code></td>
                        <td>Indicates a dangerous or potentially negative action</td>
                      </tr>
                      <tr>
                        <td><button class="btn btn-inverse" type="button">Inverse</button></td>
                        <td><code>btn btn-inverse</code></td>
                        <td>Alternate dark gray button, not tied to a semantic action or use</td>
                      </tr>
                      <tr>
                        <td><button class="btn btn-link" type="button">Link</button></td>
                        <td><code>btn btn-link</code></td>
                        <td>Deemphasize a button by making it look like a link while maintaining button behavior</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div class="span6">
                    <h5>Button sizes</h5>
                    <table class="table table-bordered table-striped">
                    <thead>
                      <tr>
                        <th style="width:50%">Sizes</th>
                        <th>class=""</th>

                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>  
                          <button class="btn btn-block btn-large btn-primary" type="button">Block button</button>
                        </td>
                        <td><code>btn btn-block btn-large</code></td>
                      </tr>
                      <tr>
                        <td>  
                          <button class="btn btn-large btn-primary" type="button">Large button</button>
                          <button class="btn btn-large" type="button">Large button</button>
                        </td>
                        <td><code>btn btn-large</code></td>
                      </tr>
                      <tr>
                        <td>  
                          <button class="btn btn-primary" type="button">Default button</button>
                          <button class="btn" type="button">Default button</button>
                        </td>
                        <td><code>btn</code></td>
                      </tr>
                      <tr>
                        <td>  
                        <button class="btn btn-small btn-primary" type="button">Small button</button>
                        <button class="btn btn-small" type="button">Small button</button>
                        </td>
                        <td><code>btn btn-small</code></td>
                      </tr>
                      <tr>
                        <td>  
                        <button class="btn btn-mini btn-primary" type="button">Mini button</button>
                        <button class="btn btn-mini" type="button">Mini button</button>
                        </td>
                        <td><code>btn btn-mini</code></td>
                      </tr>
                    </tbody>
                  </table>
                  <div class="row-fluid">
                    
                    <div class="span6">
                      <h5>Button Groups</h5>
                      <div class="btn-group">
                      <button class="btn">Left</button>
                      <button class="btn">Middle</button>
                      <button class="btn">Right</button>
                      </div>

                      <h5>Button dropdown</h5>
                      <div class="btn-group">
                        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                        Action
                        <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                          <li><a href="#">Action</a></li>
                          <li><a href="#">Another action</a></li>
                          <li><a href="#">Something else here</a></li>
                          <li class="divider"></li>
                          <li><a href="#">Separated link</a></li>
                        </ul>
                      </div>
                    </div>
                    <div class="span6">
                      <h5>Slip button dropdown</h5>
                      <div class="btn-group">
                        <button class="btn">Action</button>
                        <button data-toggle="dropdown" class="btn dropdown-toggle"><span class="caret"></span></button>
                        <ul class="dropdown-menu">
                          <li><a href="#">Action</a></li>
                          <li><a href="#">Another action</a></li>
                          <li><a href="#">Something else here</a></li>
                          <li class="divider"></li>
                          <li><a href="#">Separated link</a></li>
                        </ul>
                      </div>

                      <h5>Split dropup menus</h5>
                      <div class="btn-group dropup">
                        <button class="btn">Dropup</button>
                        <button data-toggle="dropdown" class="btn dropdown-toggle"><span class="caret"></span></button>
                        <ul class="dropdown-menu">
                          <li><a href="#">Action</a></li>
                          <li><a href="#">Another action</a></li>
                          <li><a href="#">Something else here</a></li>
                          <li class="divider"></li>
                          <li><a href="#">Separated link</a></li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>  
              </div><!--/widget-body-->
              <div class="widget-footer">
                <span class="label label-info">Footer button</span> Put this code in right after the widget-body div ends
                <code>&lt;div class=&quot;widget-footer&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;btn pull-right&quot;&gt;Button&lt;/a&gt;&lt;/div&gt;</code>
                <a href="javascript:void(0)" class="pull-right btn btn-small btn-primary">Widget Footer button</a>
              </div>
            </div><!-- /widget -->
          </div> <!-- /row-fluid -->

		</div>
		<!-- /Main window -->

    </div><!--/.fluid-container-->
    </div><!-- wrap ends-->
    <script type="text/javascript" src="assets/js/jquery.min.js"></script>
    <script type="text/javascript" src="assets/js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="assets/js/raphael-min.js"></script>
    <script type="text/javascript" src="assets/js/bootstrap.js"></script>
    <script type="text/javascript" src='assets/js/sparkline.js'></script>
    <script type="text/javascript" src='assets/js/morris.min.js'></script>
    <script type="text/javascript" src="assets/js/jquery.dataTables.min.js"></script>   
    <script type="text/javascript" src="assets/js/jquery.masonry.min.js"></script>   
    <script type="text/javascript" src="assets/js/jquery.imagesloaded.min.js"></script>   
    <script type="text/javascript" src="assets/js/jquery.facybox.js"></script>   
    <script type="text/javascript" src="assets/js/jquery.alertify.min.js"></script> 
    <script type="text/javascript" src="assets/js/jquery.knob.js"></script>
    <script type='text/javascript' src='assets/js/fullcalendar.min.js'></script>
    <script type='text/javascript' src='assets/js/jquery.gritter.min.js'></script>
    <script type="text/javascript" src="assets/js/realm.js"></script>
  </body>
</html>
